import React, { memo, useEffect, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { NewAlbumWrapper } from "./style";

import { Carousel } from "antd";
import XJHThemeHeaderRCM from "@/components/theme-header-rcm";
import { getNewAlbumsAction } from "../../store/actionCreators";
import { NEW_ALBUM_LIMIT } from "@/common/constants";
import XJHAlbumCover from "@/components/album-cover";

const XJHHotNewAlbum = memo(() => {
  // state
  const carouselRef = useRef();

  // redux hooks
  const { newAlbums } = useSelector((state) => ({
    newAlbums: state.getIn(["recommend", "newAlbums"]),
  }));
  const dispatch = useDispatch();

  // other hooks
  useEffect(() => {
    dispatch(getNewAlbumsAction(NEW_ALBUM_LIMIT));
  }, [dispatch]);

  return (
    <NewAlbumWrapper>
      <XJHThemeHeaderRCM title="album" />
      <div className="content">
        <button
          className="arrow arrow-left sprite_02"
          onClick={(e) => carouselRef.current.prev()}
        ></button>
        <div className="album">
          <Carousel dots={false} ref={carouselRef}>
            {[0, 1].map((item) => {
              return (
                <div key={item} className="page">
                  {newAlbums.slice(item * 5, (item + 1) * 5).map((iten) => {
                    return (
                      <XJHAlbumCover
                        key={iten.id}
                        info={iten}
                        size={100}
                        width={118}
                        bgp="-570px"
                      />
                    );
                  })}
                </div>
              );
            })}
          </Carousel>
        </div>
        <button
          className="arrow arrow-right sprite_02"
          onClick={(e) => carouselRef.current.next()}
        ></button>
      </div>
    </NewAlbumWrapper>
  );
});

export default XJHHotNewAlbum;
